<template>
  <link href="/assets/css/reset.css" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="/assets/css/login.css" />

  <div class="limiter">
    <div class="container-login100">
        <div class="wrap-login100">
            <van-form @submit="register">
                <div class="login100-form-avatar">
                    <img src="/assets/images/pexels-spencer-selover-428364.jpg" />
                </div>

                <!-- 手机号码 -->
                <div class="wrap-input100 validate-input">
                    <van-field
                        v-model="business.mobile"
                        name="mobile"
                        placeholder="请输入手机号码"
                        :rules="rules.mobile"
                    />
                </div>

                <!-- 密码 -->
                <div class="wrap-input100 validate-input">
                    <van-field
                        v-model="business.password"
                        type="password"
                        name="password"
                        placeholder="请输入密码"
                        :rules="rules.password"
                    />
                </div>

                <div class="container-login100-form-btn">
                    <van-button round block type="primary" native-type="submit">注 册</van-button>
                </div>

                <div class="action">
                    <router-link to="/business/login" class="txt1" href="javascript:void(0)">立即登录 》</router-link>
                </div>
            </van-form>
        </div>
    </div>
  </div>
</template>

<script setup>
    //获取this对象 == 代理对象
    const {proxy} = getCurrentInstance()
    // console.log(proxy)

    //挂载前的钩子函数
    onBeforeMount(() => {
        var business = proxy.$cookies.get('business') ? proxy.$cookies.get('business') : {}

        //判断是否是对象类型 且对象属性不为空
        if(typeof business === 'object' && Object.getOwnPropertyNames(business).length > 0)
        {
            proxy.$router.push('/business/index')
            return false
        }
    })

    let business = ref({
        mobile: '13555555555',
        password: '123123'
    })

    let rules = reactive({
        mobile: [
            {required: true, message: '请输入手机号码'},
            {pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确'}
        ],
        password:[
            {required: true, message: '请输入密码'}
        ]
    })

    const register = async (values) =>
    {
        proxy.$confirm({
            title: '注册提醒',
            message: '是否确认输入的账号信息',
        })
        .then(async () => {
            //发起请求
            var result = await proxy.$POST({
                url: '/business/register',
                params: values
            })
            //注册是否成功
            if(result.code == 0)
            {
                proxy.$fail(result.msg)
                return false
            }else
            {
                proxy.$success({
                    message: result.msg,
                    duration: 1000,
                    onClose: () => 
                    {
                        proxy.$router.push(result.url)
                        return false
                    }
                })
            }
        })
        .catch(err => {})
    }
</script>